<template>
	<div>
		<div style="text-align: center;margin-top: 2%;">
			<h3>我的订单详情</h3>
			<el-select v-model="fk" placeholder="付款" @change="find()">
				<el-option label="未付款" value="0"></el-option>
				<el-option label="已付款" value="1"></el-option>
			</el-select>
			<el-select v-model="fh" placeholder="发货" @change="find2()">
				<el-option label="未发货" value="0"></el-option>
				<el-option label="已发货" value="1"></el-option>
				<el-option label="已签收" value="2"></el-option>

			</el-select>
			<el-select v-model="sj" placeholder="日期" @change="find3()">
				<el-option label="7天内" value="7"></el-option>
				<el-option label="15天内" value="15"></el-option>
				<el-option label="30天内" value="30"></el-option>
				<el-option label="60天内" value="60"></el-option>
				<el-option label="120天内" value="120"></el-option>
			</el-select>

			<el-button style="background-color: deepskyblue; border: none;color: white;"
				@click="gogogo()">查询</el-button>
		</div>
		<el-table :data="list" style="text-align: center;width: 80%;margin-left: 10%;">

			<el-table-column prop="ordid" label="订单号">

			</el-table-column>
			<el-table-column prop="ship2name" label="收货人">

			</el-table-column>
			<el-table-column prop="ship2addr" label="收获地址">

			</el-table-column>
			<el-table-column prop="ship2phone" label="电话">

			</el-table-column>
			<el-table-column prop="shipno" label="发货单号">

			</el-table-column>
			<el-table-column prop="tcreate" label="下单时间">

			</el-table-column>
			<el-table-column prop="amount" label="总价">

			</el-table-column>
			<el-table-column label="付款">
				<template slot-scope="scope">
					<el-button v-if="scope.row.payStatus==0" style="border: none; color: red;"
						@click="getMoney(scope.row.ordid)">未付</el-button>
					<el-button v-else-if="scope.row.payStatus==1" style="border: none;">已付</el-button>

				</template>
			</el-table-column>
			<el-table-column label="收货">
				<template slot-scope="scope">
					<el-button style="border: none;">{{scope.row.shipStatus}}</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination style="margin-left: 40%; margin-top: 30px;" :page-size="num" @current-change="change"
			:current-page="page" background layout="prev, pager, next" :total="total">
		</el-pagination>
	</div>
</template>

<script>
	export default {
		name: 'myOrder',
		data() {
			return {
				page: 1,
				num: 5,
				fk: '',
				fh: '',
				sj: '7',
				user: {},
				list: [],
				total: 0,
			}
		},
		methods: {
			getMoney(id) {
				console.log(id);
				this.$router.push({
					query: {
						dx: id,
					},
					path: '/pcdoOrder2'
				});
			},
			gogogo() {
				this.show();
			},
			change(val) {
				console.log("页面更新数据值:" + val);
				this.page = val;
				this.show();
			},
			find() {
				console.log(this.fk);
				this.user.payStaus = this.fk;
			},
			find2() {
				console.log(this.fh);
				this.user.shipStatus = this.fh;
			},
			find3() {
				console.log(this.sj);
				this.user.days = this.sj;
			},
			show() {
				let arr = [];
				let o = [];
				this.$postkv('/api/fore/ord/findPageOrders/' + this.page + "/" + this.num, this.user).then((resp) => {
					this.list = resp.data.data.orders;
					this.total = resp.data.data.total;
					console.log(resp.data.data);
					this.list.forEach((item, i) => {
						// console.log("图片" + item.items);
						arr.push(item.items);
						let str = "";
						let kk = new Date(item.tcreate);
						let year = kk.getFullYear();
						let month = kk.getMonth() + 1;
						let day = kk.getDate();
						str = year + '/' + month + '/' + day;
						item.tcreate = str;
						// if (item.payStatus == 1) {
						// 	item.payStatus = "已付"
						// } else {
						// 	item.payStatus = "未付"
						// }
						if (item.shipStatus == 0) {
							item.shipStatus = "未发"

						} else if (item.shipStatus == 1) {
							item.shipStatus = "已发"

						} else {
							item.shipStatus = "已收"

						}
					})
				})
			}
		},
		mounted() {
			this.show();
		}
	}
</script>

<style>
</style>